<template>
  <page-wrap
    ref="pageWrap"
    hideTab
    back
    :title="dynamicTitle"
    :showTop="dynamicTitle"
    :dark="loaded ? false : true"
    :bg-color="dynamicColor"
    :callBackUrl="gotoMyTabUrl"
    :hideSafeArea="true"
  >
    <view class="zty-new" :style="'padding-top:' + navHeight + 'px;'">
      <view class="top">
        <view class="title">职体验</view>
        <view class="user-info" @click="jumpToEditInfo">
          <view class="avator">
            <img :src="userInfo.headImg" alt="" />
          </view>
          <view class="right-info">
            <view class="name">{{ userInfo.name }}</view>
            <view class="grade">{{ userInfo.grade }}</view>
          </view>
        </view>
      </view>
      <view class="search-box" @click="searchClick">
        <view class="left-content">查活动</view>
        <!-- <view class="left-content">寻活动/找专业/查职业</view> -->
        <img :src="fdj" class="fdj" />
      </view>
      <view class="evaluation-box">
        <view class="yourClass-box" @click="jumpToYourClass">
          <img :src="ndkc" alt="" />
          <view class="context">你的课程</view>
        </view>
        <view class="personality-box" @click="jumpToPersonalityTest">
          <img :src="xgcp" alt="" />
          <view class="context">性格测评</view>
        </view>
        <view class="job-box" @click="jumpToJobTest">
          <img :src="zycp" alt="" />
          <view class="context">职业测评</view>
        </view>
      </view>
      <!-- 这里高中才显示，小学不显示 -->
      <!-- <view class="icon-content">
        <view
          class="icon-item"
          v-for="(item, index) in iconList"
          :key="index"
          @click="itemClick(item)"
        >
          <image class="item-icon" :src="item.iconImage"></image>
          <view class="icon-title">{{ item.iconTitle }}</view>
        </view>
      </view> -->
      <view class="list">
        <view class="top">
          <view class="left">
            <view class="title">活动课程</view>
            <!-- <view class="desc">资深专家为您量身打造</view> -->
          </view>
          <view class="right"
            ><textVerticalCarouselVue :userAskList="userAskList" />
          </view>
        </view>
        <view
          :class="{ 'fixed-top': isFixed, 'tab-list': true }"
          :style="'top:' + navHeight + 'px;'"
        >
          <view
            :class="
              currentTab.label == item.label
                ? 'tab-list-item-active'
                : 'tab-list-item'
            "
            @click="changeCurrentTab(item)"
            v-for="(item, index) in tabList"
            :key="index"
            >{{ item.label }}
            <view
              v-if="currentTab.label == item.label"
              class="red-bottom"
            ></view>
          </view>
        </view>

        <scroll-view
          scroll-y="true"
          @scroll="activityListScroll1"
          class="activity-list"
        >
          <view
            class="activity-list-item"
            v-for="(item, index) in activityList"
            :key="index"
            @click="jumpToActivityDetail(item)"
          >
            <view class="left"
              ><img class="coverImg" :src="item.coverImg" alt=""
            /></view>
            <view class="right">
              <view class="title">{{ item.title }}</view>
              <view class="desc">{{ item.description }}</view>
              <view v-if="item.startTime" class="time"
                >开课时间 {{ item.startTime.replace(/-/g, '.') }}
                <span v-if="item.endTime">
                  至 {{ item.endTime.replace(/-/g, '.') }}</span
                >
              </view>
              <view v-else class="position"
                ><img class="mapImg" :src="mapImg" alt="" />
                <span>{{ item.position ? item.position : '' }}</span></view
              >
            </view>
            <view
              :class="
                item.activityStatus == 20
                  ? 'status-green'
                  : item.activityStatus == 10
                  ? 'status-orange'
                  : 'status-gray'
              "
            >
              <img
                :src="
                  item.activityStatus == 20
                    ? wks
                    : item.activityStatus == 10
                    ? zzjx
                    : yjs
                "
                alt=""
              />
              {{
                item.activityStatus == 20
                  ? '未开始'
                  : item.activityStatus == 10
                  ? '进行中'
                  : '已结束'
              }}
            </view>
          </view>
        </scroll-view>
      </view>
      <view class="about-yl">
        <view class="intro">广东省人才大数据工程技术研究中心</view>
        <view class="intro-company"
          >深圳市一览网络股份有限公司（股票代码：833680）</view
        >
        <view class="jump-btn" @click="jumpToYLIntro"
          >关于 一览
          <image class="right-arrow" :src="rightArrowImage" />
        </view>
      </view>
    </view>
    <LoginDialog
      ref="loginDialog"
      @loginSuccessBack="loginSuccessBack"
    ></LoginDialog>
  </page-wrap>
</template>

<script>
import share from '@/mixins/share';
import { debounce } from 'lodash';
import { env } from '@/api/root';
import LoginDialog from '@/components/LoginDialog';
import { addBuryingPoint } from '@/api/modules/career';
import textVerticalCarouselVue from '@/pagesSub/components/textVerticalCarousel.vue';
import { personInfo } from '@/api/modules/career';
import { offlineActivitys, getInfo } from '@/api/modules/zty.js';
import { start } from '@/api/modules/activity';
import { ztBurryPoint } from '@/api/modules/career';

export default {
  mixins: [share],
  components: {
    LoginDialog,
    textVerticalCarouselVue,
  },
  //   onPageScroll(res) {
  //     this.showTop = res.scrollTop > 0;
  //   },
  onPageScroll(e) {
    //滚动改变颜色
    if (e.scrollTop >= 30) {
      this.dynamicTitle = '职体验';
      this.dynamicColor = '#cfe8fd';
    } else {
      this.dynamicTitle = '';
    }
    if (e.scrollTop >= 300) {
      this.isFixed = true;
    } else {
      this.isFixed = false;
    }
  },
  data() {
    return {
      isFixed: false,
      mapImg: 'https://img3.job1001.com/ypMp/elan/images/ztyNew/map.png',
      personRight: null,
      cardType: '',
      tabList: [
        {
          label: '热门',
          value: 0,
        },
        {
          label: '小学',
          value: 1,
        },
        {
          label: '初中',
          value: 2,
        },
        {
          label: '高中',
          value: 3,
        },
        {
          label: '基地',
          value: 10,
        },
      ],
      currentTab: {
        label: '小学',
        value: 1,
      },
      personId: uni.getStorageSync('person-id').slice(2) || undefined,
      rightArrowImage:
        this.$imgBaseSelf + 'career/positionDictionary/about-yl-rightArrow.png',
      activityList: [
        {
          coverImg:
            'https://img3.job1001.com/ypMp/elan/images/ztyNew/coverImg.png',
          title: '我的梦想画板',
          description: '激发孩子对未来职业的憧憬',
          position: '深圳小学',
          activityStatus: 10,
          time: '2024.04.03', // 10进行中 20未开启 30已结束
        },
        {
          coverImg:
            'https://img3.job1001.com/ypMp/elan/images/ztyNew/coverImg.png',
          title: '我的梦想画板',
          description: '激发孩子对未来职业的憧憬',
          position: '深圳小学',
          activityStatus: 20,
          time: '2024.04.03',
        },
        {
          coverImg:
            'https://img3.job1001.com/ypMp/elan/images/ztyNew/coverImg.png',
          title: '我的梦想画板',
          description: '激发孩子对未来职业的憧憬',
          position: '深圳小学',
          activityStatus: 30,
          time: '2024.04.03',
        },
        {
          coverImg:
            'https://img3.job1001.com/ypMp/elan/images/ztyNew/coverImg.png',
          title: '我的梦想画板',
          description: '激发孩子对未来职业的憧憬',
          position: '深圳小学',
          activityStatus: 10,
          time: '2024.04.03',
        },
        {
          coverImg:
            'https://img3.job1001.com/ypMp/elan/images/ztyNew/coverImg.png',
          title: '我的梦想画板',
          description: '激发孩子对未来职业的憧憬',
          position: '深圳小学',
          activityStatus: 10,
          time: '2024.04.03',
        },
        {
          coverImg:
            'https://img3.job1001.com/ypMp/elan/images/ztyNew/coverImg.png',
          title: '我的梦想画板',
          description: '激发孩子对未来职业的憧憬',
          position: '深圳小学',
          activityStatus: 10,
          time: '2024.04.03',
        },
        {
          coverImg:
            'https://img3.job1001.com/ypMp/elan/images/ztyNew/coverImg.png',
          title: '我的梦想画板',
          description: '激发孩子对未来职业的憧憬',
          position: '深圳小学',
          activityStatus: 10,
          time: '2024.04.03',
        },
        {
          coverImg:
            'https://img3.job1001.com/ypMp/elan/images/ztyNew/coverImg.png',
          title: '我的梦想画板',
          description: '激发孩子对未来职业的憧憬',
          position: '深圳小学',
          activityStatus: 10,
          time: '2024.04.03',
        },
        {
          coverImg:
            'https://img3.job1001.com/ypMp/elan/images/ztyNew/coverImg.png',
          title: '我的梦想画板',
          description: '激发孩子对未来职业的憧憬',
          position: '深圳小学',
          activityStatus: 10,
          time: '2024.04.03',
        },
        {
          coverImg:
            'https://img3.job1001.com/ypMp/elan/images/ztyNew/coverImg.png',
          title: '我的梦想画板',
          description: '激发孩子对未来职业的憧憬',
          position: '深圳小学',
          activityStatus: 10,
          time: '2024.04.03',
        },
      ],
      userAskList: [
        { content: '139****0531用户已学习' },
        { content: '136****9622用户已学习' },
        { content: '182****0623用户已学习' },
        { content: '186****0454用户已学习' },
        { content: '173****0121用户已学习' },
        { content: '150****0586用户已学习' },
        { content: '181****8767用户已学习' },
      ],
      fdj: '//img3.job1001.com/ypMp/elan/images/ztyNew/fdj.png',
      ndkc: '//img3.job1001.com/ypMp/elan/images/ztyNew/ndkc.png',
      xgcp: '//img3.job1001.com/ypMp/elan/images/ztyNew/xgcp.png',
      zycp: '//img3.job1001.com/ypMp/elan/images/ztyNew/zycp.png',
      zzjx: '//img3.job1001.com/ypMp/elan/images/ztyNew/zzjx.png',
      wks: '//img3.job1001.com/ypMp/elan/images/ztyNew/wks.png',
      yjs: '//img3.job1001.com/ypMp/elan/images/ztyNew/yjs.png',
      dynamicColor: '',
      dynamicTitle: '',
      navHeight: getApp().globalData.navHeight,
      userInfo: {
        headImg:
          'https://img3.job1001.com/ypMp/elan/images/ztyNew/defaultAvator.png',
        name: '',
        grade: '',
      },
      iconList: [
        {
          iconImage:
            this.$imgBaseSelf + 'career/positionDictionary/icon_major1.png',
          iconTitle: '查专业',
          itemId: 1,
        },
        {
          iconImage:
            this.$imgBaseSelf + 'career/positionDictionary/icon_career1.png',
          iconTitle: '查职业',
          itemId: 2,
        },
        {
          iconImage:
            this.$imgBaseSelf + 'career/positionDictionary/icon_salary1.png',
          iconTitle: '查薪酬',
          itemId: 3,
        },
        {
          iconImage:
            this.$imgBaseSelf + 'career/positionDictionary/icon_test1.png',
          iconTitle: '职业测评',
          itemId: 0,
        },
      ],
    };
  },
  methods: {
    async ztBurryPointFn(rightId) {
      const params = {
        rightId: rightId,
        cardType: uni.getStorageSync('cardType'),
        personId: this.personId,
        description: `${this.personId}点击了${rightId}`,
      };
      const res = await ztBurryPoint(params);
      if (res.code == 200) {
        console.log('埋点成功');
      }
    },
    async startFn() {
      const params = {
        personId: uni.getStorageSync('person-id').slice(2),
        assessmentType: 0,
        assessmentVersion: 2, // 测评版本 1:v1版本 2：v2版本，只要是点击了答题，都是v2版本
      };
      const res = await start(params);
      if (res.code == 200) {
        this.resultId = res.data.id;
        wx.setStorageSync('assessmentId', this.resultId);
        uni.navigateTo({
          url: `/pagesSub/career/activity/vocationalAssessmentAnswer`,
        });
      }
    },
    async personInfoFn() {
      const params = {
        personId: uni.getStorageSync('person-id').slice(2),
      };
      const res = await personInfo(params);
      if (res.code == 200) {
        this.personRight = res.data.personRight;
      }
    },
    showLoginDialog() {
      this.$refs.loginDialog.setVisibility(true);
    },
    async getInfoFn() {
      const params = {
        personId: uni.getStorageSync('person-id').slice(2) || undefined,
      };
      const res = await getInfo(params);
      if (res.code == 200) {
        uni.setStorageSync('cardType', res.data.cardType);
        if (Object.keys(res.data).length == 0 || res.data.classId <= 0) {
          uni.navigateTo({
            url: `/pagesSub/ztyNew/basicInfo/index`,
          });
        } else {
          if (res.data.photo) {
            this.userInfo.headImg = res.data.photo;
          }
          this.userInfo.name = res.data.personName;
          this.userInfo.grade =
            res.data.ztyClass.className == ''
              ? res.data.ztyClass.classIndex + '年级'
              : res.data.ztyClass.className;

          setTimeout(() => {
            this.activityList.forEach((item) => {
              this.$set(item, 'position', res.data.school.schoolName);
            });
          }, 200);
        }
      }
    },
    async offlineActivitysFn() {
      const params = {
        educationLevel: this.currentTab.value,
      };
      const res = await offlineActivitys(params);
      if (res.code == 200) {
        console.log('res', res);
        this.activityList = res.data;
        this.getInfoFn();
      }
    },
    jumpToActivityDetail(item) {
      uni.navigateTo({
        url: `/pagesSub/ztyNew/activityDetail/index?itemInfo=${encodeURIComponent(
          JSON.stringify(item)
        )}`,
      });
    },
    changeCurrentTab(item) {
      this.currentTab = item;
      this.offlineActivitysFn();
    },
    searchClick() {
      uni.navigateTo({
        //查专业/职业搜索
        url: `/pagesSub/ztyNew/searchPage/index`,
      });
    },
    jumpToEditInfo() {
      uni.navigateTo({
        url: `/pagesSub/ztyNew/editInfo/index`,
      });
    },
    jumpToYourClass() {
      // 跳转至你的课程页面
      // 后续可能会添加埋点
      uni.navigateTo({
        url: '/pagesSub/ztyNew/courseList/index',
      });
    },
    jumpToPersonalityTest() {
      this.ztBurryPointFn('1');
      if (!this.personRight) {
        // 否则就去做题
        if (env == 'test' || env == 'local') {
          let url = `https://3g.crm1001.com/v2/disc/#/disc/question?personId=${uni
            .getStorageSync('person-id')
            .slice(2)}&iname=${uni.getStorageSync(
            'person-id'
          )}&phone=18825449087&from=miniprogramZty&cardType=${uni.getStorageSync(
            'cardType'
          )}`;
          uni.navigateTo({
            url:
              '/pagesSub/public/web/descWebView?link=' +
              encodeURIComponent(url),
          });
        } else if (env == 'pro' || env == 'pre') {
          let url = `https://3g.crm1001.com/v2/disc/#/disc/question?personId=${uni
            .getStorageSync('person-id')
            .slice(2)}&iname=${uni.getStorageSync(
            'person-id'
          )}&phone=18825449087&from=miniprogramZty&cardType=${uni.getStorageSync(
            'cardType'
          )}`;
          uni.navigateTo({
            url:
              '/pagesSub/public/web/descWebView?link=' +
              encodeURIComponent(url),
          });
        }
      }
      setTimeout(() => {
        if (this.personRight.personalityQuiz) {
          const extra = JSON.parse(this.personRight.personalityQuiz.extra);
          if (extra && extra.character) {
            console.log('aaaa');
            // 如果存在就去结果页
            if (env == 'test' || env == 'local') {
              let url = `https://3g.crm1001.com/v2/disc/#/disc/result?userId=${
                extra.userId
              }&iname=${uni.getStorageSync('person-id')}&from=miniprogramZty`;
              uni.navigateTo({
                url:
                  '/pagesSub/public/web/descWebView?link=' +
                  encodeURIComponent(url),
              });
            } else if (env == 'pro' || env == 'pre') {
              let url = `https://3g.crm1001.com/v2/disc/#/disc/result?userId=${
                extra.userId
              }&iname=${uni.getStorageSync('person-id')}&from=miniprogramZty`;
              uni.navigateTo({
                url:
                  '/pagesSub/public/web/descWebView?link=' +
                  encodeURIComponent(url),
              });
            }
          }
        } else {
          // 否则就去做题
          if (env == 'test' || env == 'local') {
            console.log('aaaaa1');
            let url = `https://3g.crm1001.com/v2/disc/#/disc/question?personId=${uni
              .getStorageSync('person-id')
              .slice(2)}&iname=${uni.getStorageSync(
              'person-id'
            )}&phone=18825449087&from=miniprogramZty&cardType=${uni.getStorageSync(
              'cardType'
            )}`;
            uni.navigateTo({
              url:
                '/pagesSub/public/web/descWebView?link=' +
                encodeURIComponent(url),
            });
          } else if (env == 'pro' || env == 'pre') {
            console.log('aaaaa2');
            let url = `https://3g.crm1001.com/v2/disc/#/disc/question?personId=${uni
              .getStorageSync('person-id')
              .slice(2)}&iname=${uni.getStorageSync(
              'person-id'
            )}&phone=18825449087&from=miniprogramZty&cardType=${uni.getStorageSync(
              'cardType'
            )}`;
            console.log('url', url);
            uni.navigateTo({
              url:
                '/pagesSub/public/web/descWebView?link=' +
                encodeURIComponent(url),
            });
          }
        }
      }, 500);
    },
    jumpToJobTest() {
      this.ztBurryPointFn('2');
      if (this.personRight.careerQuiz) {
        uni.navigateTo({
          url: `/pagesSub/careerAssessResultActNew/index?personId=${this.personId}&fromWhere=miniprogramZty`,
        });
      } else {
        this.startFn();
        // uni.navigateTo({
        //   url: `/pagesSub/career/activity/vocationalAssessmentAnswer`,
        // });
      }
    },
    loginSuccessBack() {
      this.personId = uni.getStorageSync('person-id').slice(2) || undefined;
      // this.offlineActivitysFn();
    },
    jumpToYLIntro() {
      let url = 'https://mp.weixin.qq.com/s/d1bp8v6Iw1mRj6YsmwguSQ';
      uni.navigateTo({
        url: '/pagesSub/careerGrow/careerSearch/webview?url=' + url,
      });
    },
    activityListScroll1() {},
    itemClick(item) {
      if (item.itemId === 0) {
        // this.addBuryingPointFn(20056, "", "", "", "");
        // wx.reportEvent("search_career_measure_click", {}); //聚合搜索页—职业测评
        //职业测评
        uni.navigateTo({
          url: `/pagesSub/career/activity/vocationalAssessment?fromWhere=junior`,
        });
      } else if (item.itemId === 1) {
        // this.addBuryingPointFn(20050, "", "", "", "");
        // wx.reportEvent("search_career_major_click", {}); //聚合搜索页—点击查专业
        //查专业
        uni.navigateTo({
          url: `/pagesSub/careerNew/positionDictionary/MajorSearchSub`,
        });
      } else if (item.itemId === 2) {
        // this.addBuryingPointFn(20051, "", "", "", "");
        // wx.reportEvent("search_career_job_click", {}); //聚合搜索页—点击查职业
        //查职业
        // uni.reLaunch({
        //   url: `/pages/career/positionDictionary/allCategory?fromOrigin=careerSearch&showReturnBtnTop=true`,
        // });
        uni.navigateTo({
          url: `/pagesSub/careerGrow/allCategory/allCategory?fromOrigin=careerSearch&showReturnBtnTop=true`,
        });
        uni.setStorageSync('showReturnBtnTop', true); // 存储起来 下次从下一级页面返回来的时候去缓存中取这个值表示要显示左上角返回箭头
      } else if (item.itemId === 3) {
        // this.addBuryingPointFn(20052, "", "", "", "");
        // wx.reportEvent("search_career_salary_click", {}); //聚合搜索页—点击查薪酬
        //查薪酬
        uni.navigateTo({
          url: `/pagesSub/careerGrow/salarySearch/index`,
        });
      }
    },
  },
  created() {},
  onShow() {
    if (!this.personId) {
      this.showLoginDialog();
      return;
    } else {
      this.offlineActivitysFn();
      this.personInfoFn();
    }
  },
  mounted() {
    // this.changeCurrentTab(this.tabList[1]);
  },
};
</script>

<style lang="scss" scoped>
$img-base-person: $img-base + 'careerPath/';
@font-face {
  font-family: 'AlimamaFangYuanTiVF-Thin-2';
  /*定义字体名称*/
  src: url('https://img3.job1001.com/ypMp/elan/images/ztyNew/AlimamaFangYuanTiVF-Thin-2.ttf');
}

.zty-new {
  background-image: url($img-base + 'ztyNew/ztybg.png');
  background-size: 100% 100%;
  background-repeat: no-repeat;
  height: 100vh;
  .top {
    height: 58rpx;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    padding: 0 64rpx 0 44rpx;
    .title {
      height: 48rpx;
      font-family: 'AlimamaFangYuanTiVF-Thin-2';
      font-weight: 600;
      font-size: 48rpx;
      color: #222222;
    }
    .user-info {
      display: flex;
      flex-direction: row;
      align-items: center;
      .avator {
        width: 56rpx;
        height: 56rpx;
        margin-right: 12rpx;
        img {
          width: 56rpx;
          height: 56rpx;
          border-radius: 50%;
        }
      }
      .right-info {
        height: 56rpx;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: space-around;
        .name {
          font-weight: 400;
          font-size: 24rpx;
          color: #222222;
        }
        .grade {
          font-weight: 400;
          font-size: 20rpx;
          color: #7e99b5;
        }
      }
    }
  }
  .search-box {
    margin: 24rpx 26rpx 0rpx 38rpx;
    width: calc(100% - 64rpx);
    height: 96rpx;
    background: #ffffff;
    border-radius: 24rpx;
    border: 4rpx solid #151515;
    padding: 24rpx 36rpx 22rpx 26rpx;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    .left-content {
      font-family: PingFang-SC, PingFang-SC;
      font-weight: bold;
      font-size: 36rpx;
      color: #bad2ea;
    }
    .fdj {
      width: 40rpx;
      height: 36rpx;
      // margin-right: 16rpx;
      flex-shrink: 0;
    }
  }
  .evaluation-box {
    width: 100%;
    margin-top: 84rpx;
    display: flex;
    padding: 0 32rpx 0 42rpx;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 16rpx;
    margin-bottom: 30rpx;
    .yourClass-box,
    .personality-box,
    .job-box {
      height: 142rpx;
      border-radius: 32rpx;
      flex: 1;
      position: relative;
      img {
        position: absolute;
        width: 112rpx;
        height: 112rpx;
        top: -35%;
        left: 50%; /* 向右移动 50% 的父元素宽度 */
        transform: translateX(-50%); /* 向左移动自身宽度的 50% */
      }
      .context {
        position: absolute;
        width: 144rpx;
        height: 32rpx;
        left: 50%; /* 向右移动 50% 的父元素宽度 */
        transform: translateX(-50%); /* 向左移动自身宽度的 50% */
        bottom: 28rpx;
        font-size: 36rpx;
        font-family: 'AlimamaFangYuanTiVF-Thin-2';
        font-weight: 600;
      }
    }
    .yourClass-box {
      color: #181f5c;
      background: linear-gradient(114deg, #ffeddf 0%, #fdebf1 100%);
    }
    .personality-box {
      color: #181f5c;
      background: linear-gradient(114deg, #eceffe 0%, #e1f2ff 100%);
    }
    .job-box {
      color: #08401f;
      background: linear-gradient(118deg, #daf7fa 0%, #cef9e5 100%);
    }
  }

  .icon-content {
    display: flex;
    margin: 0rpx 54rpx 48rpx 54rpx;
    justify-content: space-between;
    align-items: center;

    .icon-item {
      display: block;
      .item-icon {
        width: 100rpx;
        height: 100rpx;
      }

      .icon-title {
        margin-top: 24rpx;
        text-align: center;
        font-size: 28rpx;
        font-weight: 400;
        color: #333;
      }
    }
  }
  .list {
    width: calc(100% - 64rpx);
    margin: 0 auto;
    background: #ffffff;
    border-radius: 16rpx;
    padding: 30rpx 0rpx 18rpx 18rpx;
    .tab-list {
      padding-right: 26rpx;
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 38rpx;
      .tab-list-item {
        color: #555555;
        font-weight: 400;
        font-size: 28rpx;
        position: relative;
        &-active {
          @extend .tab-list-item;
          color: #222222;
          font-weight: 800;
          font-size: 30rpx;
        }
        .red-bottom {
          position: absolute;
          width: 34rpx;
          height: 10rpx;
          background: linear-gradient(90deg, #f65b3c 0%, #fdfbfc 100%);
          border-radius: 12rpx;
          bottom: -4rpx;
          left: 50%; /* 向右移动 50% 的父元素宽度 */
          transform: translateX(-50%); /* 向左移动自身宽度的 50% */
        }
      }
    }
    .fixed-top {
      position: fixed;
      // top: 10vh;
      height: 60rpx;
      width: calc(100% - 80rpx);
      z-index: 999;
      background: #ffffff;
      margin: 0 auto;
    }
    .top {
      width: 100%;
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: space-between;
      padding: 0;
      margin-bottom: 38rpx;
      .left {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        height: 86rpx;
        .title {
          font-family: 'AlimamaFangYuanTiVF-Thin-2';
          font-weight: normal;
          font-size: 32rpx;
          color: #222222;
          font-weight: 600;
        }
        .desc {
          font-family: PingFangSC, PingFang SC;
          font-weight: 400;
          font-size: 24rpx;
          color: #acbac5;
        }
      }
    }
    .activity-list {
      margin-top: 42rpx;
      width: calc(100% - 20rpx);
      // height: calc(100vh - 694rpx);
      padding-right: 20rpx;
      .activity-list-item {
        width: 100%;
        display: flex;
        flex-direction: row;
        background: linear-gradient(170deg, #f6fdff 0%, #f6fdff 100%);
        border-radius: 0rpx 16rpx 16rpx 0rpx;
        margin-bottom: 24rpx;
        position: relative;
        .left {
          width: 166rpx;
          border-radius: 18rpx;
          box-shadow: 5px 5px 10px rgba(206, 223, 237, 1);
          img {
            border-radius: 18rpx;
            width: 166rpx;
            height: 196rpx;
          }
        }
        .right {
          display: flex;
          flex-direction: column;
          padding: 28rpx 30rpx;
          flex: 1;
          overflow: hidden;
          .title {
            font-family: PingFang-SC, PingFang-SC;
            font-weight: bold;
            font-size: 28rpx;
            color: #444444;
            height: 36rpx;
            line-height: 36rpx;
            margin-bottom: 8rpx;
          }
          .desc {
            font-weight: 400;
            font-size: 26rpx;
            color: #9baebb;
            height: 40rpx;
            line-height: 40rpx;
            margin-bottom: 24rpx;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            width: 100%; /* 确保容器有固定宽度 */
          }
          .position {
            font-family: PingFangSC, PingFang SC;
            font-weight: 400;
            font-size: 24rpx;
            color: #9baebb;
            height: 40rpx;
            line-height: 40rpx;
            display: flex;
            flex-direction: row;
            align-items: center;
            span {
              margin-left: 14rpx;
              color: #9baebb;
            }
            .mapImg {
              width: 28rpx;
              height: 28rpx;
            }
          }
          .time {
            font-family: PingFangSC, PingFang SC;
            font-weight: 400;
            font-size: 24rpx;
            color: #9baebb;
            z-index: 999;
          }
        }
        .status {
          width: 160rpx;
          height: 44rpx;
          background: #ffffff;
          border-radius: 12rpx;
          position: absolute;
          right: 14rpx;
          bottom: 18rpx;
          font-size: 22rpx;
          display: flex;
          flex-direction: row;
          align-items: center;
          justify-content: center;
          gap: 12rpx;
          img {
            width: 22rpx;
            height: 22rpx;
          }
          &-green {
            @extend .status;
            color: #43b77f; /* 绿色背景 */
          }

          &-orange {
            @extend .status;
            color: #ff7600; /* 橙色背景 */
          }
          &-gray {
            @extend .status;
            color: #c2c2c2; /* 橙色背景 */
          }
        }
      }
    }
  }
  .about-yl {
    height: 382rpx;
    margin-top: 40rpx;
    display: flex;
    flex-direction: column;
    align-items: center;
    // justify-content: center;
    background-image: url($img-base + 'career/positionDictionary/bottom-bg.png');
    background-size: 100% 100%;
    background-repeat: no-repeat;
    .jump-btn {
      margin-top: 48rpx;
      width: 248rpx;
      height: 64rpx;
      border-radius: 33rpx;
      border: 2rpx solid #dee7f0;
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: center;
      font-family: PingFang-SC, PingFang-SC;
      font-weight: 500;
      font-size: 22rpx;
      color: #a6b9cd;
      .right-arrow {
        width: 20rpx;
        height: 20rpx;
        margin-left: 10rpx;
      }
    }
    .intro {
      font-family: PingFang-SC, PingFang-SC;
      font-weight: bold;
      font-size: 28rpx;
      color: #c0cede;
      line-height: 40rpx;
      margin-top: 48rpx;
    }
    .intro-company {
      font-family: PingFang-SC, PingFang-SC;
      font-weight: 500;
      font-size: 24rpx;
      color: #8ea4bc;
      line-height: 34rpx;
      margin-top: 16rpx;
    }
  }
}
</style>
